<!--未完成项目-->
<template :style="dataTable">
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item label="项目名称">
					<el-input v-model="params.name" placeholder="请输入项目名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="serBtn()">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :height=heightData class="duration-info"
				  :data="dataList"  border header-align="center"  :row-class-name="tableRowClassName"
				  highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="index" align="center" width="50">
			</el-table-column>
			<el-table-column prop="projectName" label="项目名称" align="center" >
			</el-table-column>
			<el-table-column prop="Location" label="归属地" align="center" >
			</el-table-column>
			<el-table-column prop="parent" label="负责人"  align="center" width="80" >
			</el-table-column>
			<el-table-column prop="creator" label="创建人"  align="center" width="80" >
			</el-table-column>
			<el-table-column prop="progress" label="进度"  align="center" width="60">
			</el-table-column>
			<el-table-column prop="start_date" label="开始时间"  align="center" >
			</el-table-column>
			<el-table-column prop="end_date" label="结束时间"  align="center" >
			</el-table-column>
			<el-table-column prop="overtime" label="时间状态" align="center" min-width="100">
				<template slot-scope="scope">
					<div style="display: flex;"  v-if="scope.row.overtime >= 0 && scope.row.progress !== '100%' && scope.row.status === 0">
						<span style="background:rgb(203, 228, 247); width: 100%; display: block;position: relative;">
							<p :style="'width:'+ scope.row.suctimeD +'%; background:#0000002e;position: absolute;top: 0px;left: 0px;height: 100%;'"> </p>
							<p style="color:#51575d;">剩余{{scope.row.suctime - scope.row.nowtime}}天</p>
							</span>
					</div>
					<div style="display: flex;"  v-if="scope.row.overtime >= 0 && scope.row.progress === '100%' && scope.row.status === 0">
						<span style="background:rgb(203, 245, 247); width: 100%; display: block;position: relative;">
							<p :style="'width:100%; background:#0000002e;position: absolute;top: 0px;left: 0px;height: 100%;'"> </p>
							<p style="color:#51575d;">已完成</p>
							</span>
					</div>
					<div style="display: flex;"  v-if="scope.row.status === 1">
						<span style="background:rgb(203, 245, 247); width: 100%; display: block;position: relative;">
							<p :style="'width:100%; background:#0000002e;position: absolute;top: 0px;left: 0px;height: 100%;'"> </p>
							<p style="color:#51575d;">{{scope.row.closeDay}}</p>
							</span>
					</div>
					<el-tag v-if="scope.row.overtime < 0 && scope.row.progress !== '100%' && scope.row.status === 0" :type="scope.row.overtime > 0 ? 'primary' : 'success'"
							disable-transitions>超时 {{scope.row.overtime/-1}} 天</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="priority" label="优先级别" align="center"  min-width="100">
				<template slot-scope="scope">
					<b style="color: rgb(255, 0, 0)" v-if="scope.row.priority === 1">一级</b>
					<b style="color: rgb(185, 153, 31)" v-if="scope.row.priority === 2">二级</b>
					<b style="color:rgb(81, 127, 162);" v-if="scope.row.priority === 3">三级</b>
				</template>
			</el-table-column>
			<el-table-column label="操作" min-width="300" width="300" align="center">
				<template scope="scope">
					<el-button size="small" @click="detail(scope.$index, scope.row)">项目详情</el-button>
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button v-if="nowLoginUser === scope.row.creators" size="small" type="warning" @click="closeBtn(scope.$index, scope.row)">关闭</el-button>
					<el-button v-if="nowLoginUser === scope.row.creators && scope.row.status === 0" type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" style="margin: 10px 0px">
			<!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
			<el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="params.page"   :page-sizes="[5,10, 20, 30, 40,50,200]"
							:page-size="params.pageSize"  layout="total, sizes, prev, pager, next, jumper" :total="totalRecord" style="float:right;">
			</el-pagination>
		</el-col>
	</section>
</template>

<script>
    import util from '../../common/js/util'
    import insurance from '../../api/insurance';
    import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

    export default {
        data() {
            return {
                nowLoginUser:'0',
                params: {
                    page: 1,     //  当前页
                    pageSize: 10,    //  每页行数
                    usrID:99,
                    mode:1,
                    name:'',
                },
				userList:[],
                totalRecord:0,  //  总记录数
                filters:{'name':''},
                dataList:[],
                total: 0,
                page: 1,
                listLoading: false,
                sels: [],//列表选中列

                heightData: document.body.clientHeight-200,
                dataTable:document.body.clientHeight-200,
            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
			// 项目完成状态
            stuPro(stu){
                this.params.mode = stu;
                this.getProList();     // 调用公共列表方法
			},
			// 我的项目
            userPro(uid){
                if(uid != 99){
                    this.params.usrID = JSON.parse(sessionStorage.getItem('user')).id;
				}else{
                    this.params.usrID = uid;
				}
                this.getProList();     // 调用公共列表方法
			},
            // 查询
            serBtn(){

                this.getProList();     // 调用公共列表方法
			},
            //  每页行数 选择事件
            handleSizeChange(val) {
                this.params.pageSize = val;        // 分页参数 每页行数 （赋值全局变量）
                this.getProList();  // 调用公共列表方法
            },

            // 当前页数 点击事件
            handleCurrentChange(val) {
                this.params.page  = val;    // 分页参数 当前页数 （赋值全局变量）
                this.getProList();     // 调用公共列表方法
            },
            //获取项目列表
            getProList() {
                this.listLoading = true;
                var that = this;
                $.ajax(insurance.posturl+"proj/allProjs?page="+(that.params.page-1)+"&pageSize="+that.params.pageSize+'&usrID='+
                    JSON.parse(sessionStorage.getItem('user')).id+'&mode='+that.params.mode+'&name='+that.params.name,{
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    'type': 'GET',
                    success:function (res) {
                        res = JSON.parse(JSON.parse(res).Content);
                        that.totalRecord = res.count;
                        var data = [];
                        for(var i = 0; i<res.list.length; i++){
                            if(res.list[i].status !== 2) {
                                var d1 = new Date(that.dateR(res.list[i].end_date));
                                var dn = new Date();

                                var dot = 0;
                                var overTime = 0;	// 完成的时间
                                if (d1 > dn) {	// 未超时
                                    dot = d1.getTime() - dn.getTime();
                                    overTime = Math.floor(dot / (24 * 3600 * 1000));
                                } else {	// 已超时 为 -
                                    dot = dn.getTime() - d1.getTime();
                                    overTime = -Math.floor(dot / (24 * 3600 * 1000));
                                }
                                var sd = new Date(that.dateR(res.list[i].start_date));
                                var ed = new Date(that.dateR(res.list[i].end_date));
                                var sddot = ed.getTime() - sd.getTime();
                                var nowdot = dn.getTime() - sd.getTime();
                                var nowTime = Math.floor(nowdot / (24 * 3600 * 1000));

                                var sucTime = Math.floor(sddot / (24 * 3600 * 1000));	// 正常完成的时间
                                var sucTimeD = 100 - (nowTime / sucTime * 100);
                                var ds = {
                                    ID: res.list[i].ID,
                                    Location: res.list[i].Location,
                                    end_date: res.list[i].end_date,
                                    owner_id: res.list[i].owner_id,
                                    parent: res.list[i].parent,
                                    progress: res.list[i].progress,
                                    projectName: res.list[i].projectName,
                                    start_date: res.list[i].start_date,
                                    status: res.list[i].status,
                                    text: res.list[i].text,
                                    closeDay: res.list[i].closeDay,
                                    overtime: overTime,	// 超时时间		正的为剩余时间， - 为超时时间
                                    suctime: sucTime,	// 正常应该完成的时间
                                    nowtime: nowTime,	// 当前的工作进度 时间
                                    suctimeD: sucTimeD,	// 正常完成时间进度
                                    priority:res.list[i].priority,
                                    creator: res.list[i].creator,
                                    creators: res.list[i].creator
                                };
                                var d = {};
                                ds.start_date = that.dateR(ds.start_date);
                                ds.end_date = that.dateR(ds.end_date);
                                ds.progress = ds.progress * 100 + '%';

                                for (var k = 0; k < that.userList.length; k++) {
                                    if (ds.owner_id == that.userList[k].key) {
                                        ds.parent = that.userList[k].label;
                                    }
                                    if (ds.creator == that.userList[k].key) {
                                        ds.creator = that.userList[k].label;
                                    }
                                    d = ds;
                                }
                                data.push(ds);
                            }
                        }
                        that.dataList = data;
                        that.listLoading = false;
                    }
                });
            },
            // 时间格式化 日 - 月
            dateR(d){
                var dates = d.split(' ')[0].split('-');
                var time = d.split(' ')[1].split(':');
                if(time[0] < 10){time[0] = '0'+time[0]}
                if(time[1] < 10){time[1] = '0'+time[1]}
                return dates[2]+'-'+dates[1]+'-'+dates[0]
                    // +'    '+' '+'    '+time[0]+':'+time[1];
            },

            //删除
            handleDel: function (index, row) {
                var that = this;
                that.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    that.listLoading = true;
                    $.ajax(insurance.posturl+"proj/deleteProj?projID="+row.ID+"&operator="+JSON.parse(sessionStorage.getItem('user')).id,{
                        headers: {'Content-Type': 'application/json;charset=UTF-8'},
                        'type': 'POST',
                        success:function (res) {
                            res = JSON.parse(res);
                            if(!res.isSuccess){
                                that.$message({ message: '删除失败',type: 'success'});
                            }else{
                                that.$message({ message: '删除成功',type: 'success'});
                                that.getProList();
                            }
                            that.listLoading = false;
                        }
                    });
                }).catch(() => {
                });
            },
			//	详情页跳转
            detail(index, row){
                location.reload();
                this.$router.push({path: '/Gantt3', query: {ID:row.ID}});
			},
            //显示编辑界面
            handleEdit: function (index, row) {
                this.$router.push({path: '/proAdd', query: {ID:row.ID,routers:'projectNO'}});
            },
			// 项目关闭
            closeBtn: function (index, row) {
                var that = this;
                that.$confirm('确认关闭该项目吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    that.listLoading = true;
                    $.ajax(insurance.posturl+"proj/closeProj?projID="+row.ID+"&operator="+JSON.parse(sessionStorage.getItem('user')).id,{
                        headers: {'Content-Type': 'application/json;charset=UTF-8'},
                        'type': 'POST',
                        success:function (res) {
                            res = JSON.parse(res);
                            if(!res.isSuccess){
                                that.$message({ message: '关闭失败',type: 'success'});
                            }else{
                                that.$message({ message: '关闭成功',type: 'success'});
                                that.getProList();
                            }
                            that.listLoading = false;
                        }
                    });
                }).catch(() => {
                });
			},
            //显示新增界面
            handleAdd: function () {
              	this.$router.push('/proAdd');
            },

            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item.id).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = { ids: ids };
                    batchRemoveUser(para).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getProList();
                    });
                }).catch(() => {

                });
            },
			// 获取用户列表
            getUser(){
                var that = this;
                $.ajax(insurance.posturl+"user/AllUsers?page=0&pageSize=200",{
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    'type': 'GET',
                    success:function (res) {
                        res = JSON.parse(JSON.parse(res).Content);
                        var data = [];
                        for(var i = 0; i<res.list.length; i++){
                            data.push({'key':res.list[i].id,'label':res.list[i].name})
                        }
                        that.userList = data;
                        var data3 = [];
                        for(var i = 0; i<res.list.length; i++){
                            data3.push({'key':res.list[i].id,'label':res.list[i].name});
                        }
                        window.localStorage.setItem('userList2', JSON.stringify(data3));
                    }
                });
            },
        },
        mounted() {
            this.getUser();
            var seconds = 1;
            var time = setInterval(() => {
                if (seconds > 1) {
                    seconds = seconds - 1;
                } else {
                    this.getProList();
                    clearInterval(time);
                }
            },100);
            this.nowLoginUser = JSON.parse(sessionStorage.getItem('user')).id;
        }
    }

</script>

<style>
	.el-table .warning-row {
		background: oldlace;
	}
	.el-table .success-row {
		background: #f0f9eb;
	}
	.duration-info .el-progress__text{width: 0px; display: none;}
	.duration-info .el-progress-bar{background: #ccc;}
	.duration-info .el-progress-bar{padding-right: 0px;}
	.duration-info .el-progress-bar__outer{background-color: rgb(195, 195, 195);}
	.duration-info .el-tag--success{background-color: rgba(249, 138, 138, 0.35);border-color: rgba(224, 136, 136, 0.6);color: rgb(255, 0, 0);width: 100%;}
</style>